<template>
  <div id="material">
    <div class="tab-wrap">
      <div>
        <el-tabs v-model.trim="curType" @tab-click="partTypeChange">
          <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
          </el-tab-pane>
        </el-tabs>
      </div>
      <div>
        <el-button icon="iconfont icon-jiufuqianbaoicon06" size="mini" class="exportBtn add" @click="addMaterial">
          添加材料
        </el-button>
      </div>
    </div>
    <div class="list-container">
      <model-tables ref="modeltable" v-if="curType === '1'"></model-tables>
      <one-type-tables ref="modeltable" v-else-if="curType === '2'"> </one-type-tables>
      <two-type-tables ref="modeltable" v-else-if="curType === '3'"> </two-type-tables>
      <material-tables ref="modeltable" v-else-if="curType === '4'"> </material-tables>
    </div>
    <el-dialog
      :width="modeltype.length > 1 ? '634px' : '596px'"
      class="model-dialog"
      v-if="modelVisible"
      :center="true"
      :close-on-click-modal="false"
      title="添加材料规格型号"
      :before-close="closeDialog"
      :visible.sync="modelVisible"
    >
      <!-- 添加一级品类 -->
      <el-dialog
        :width="oneModelList.length > 1 ? '500px' : '461px'"
        append-to-body
        v-if="oneTypeVisible"
        :center="true"
        :before-close="oneCloseDialog"
        :close-on-click-modal="false"
        title="添加一级品类"
        :visible.sync="oneTypeVisible"
      >
        <el-form ref="form" class="infoForm" label-width="100px">
          <el-form-item label="一级品类名称:">
            <add-type
              v-model.trim="oneTypeName"
              :modellist="oneModelList"
              @delType="delModel($event, '一级')"
            ></add-type>
            <el-button size="mini" class="exportBtn xz" @click="addClick('添加一级品类')"> 新增 </el-button>
          </el-form-item>
        </el-form>
        <dialog-footer-button
          @close="close('一级品类名称')"
          @saveName="saveName('一级品类名称')"
        ></dialog-footer-button>
      </el-dialog>
      <!-- 添加二级品类 -->
      <el-dialog
        :width="twoModelList.length > 1 ? '500px' : '461px'"
        append-to-body
        v-if="twoTypeVisible"
        :center="true"
        :before-close="twoCloseDialog"
        :close-on-click-modal="false"
        title="添加二级品类"
        :visible.sync="twoTypeVisible"
      >
        <el-form ref="form" class="infoForm" label-width="100px">
          <el-form-item label="一级品类名称:">
            <add-type :modellist="oneModelList" @delType="delModel($event, '一级')"></add-type>
          </el-form-item>
          <el-form-item label="二级品类名称:">
            <add-type v-model.trim="twoTypeName" :modellist="twoModelList" @delType="delModel($event, '二级')">
            </add-type>
            <el-button size="mini" class="exportBtn xz" @click="addClick('添加二级品类')"> 新增 </el-button>
          </el-form-item>
        </el-form>
        <dialog-footer-button
          @close="close('二级品类名称')"
          @saveName="saveName('二级品类名称')"
        ></dialog-footer-button>
      </el-dialog>
      <!-- 添加材料名称 -->
      <el-dialog
        :width="materialList.length > 1 ? '500px' : '461px'"
        append-to-body
        v-if="materalVisible"
        :center="true"
        :before-close="materialCloseDialog"
        :close-on-click-modal="false"
        title="添加材料名称"
        :visible.sync="materalVisible"
      >
        <el-form ref="form" class="infoForm" label-width="100px">
          <el-form-item label="一级品类名称:">
            <add-type :modellist="oneModelList" @delType="delModel($event, '一级')"></add-type>
          </el-form-item>
          <el-form-item label="二级品类名称:">
            <add-type :modellist="twoModelList" @delType="delModel($event, '二级')"> </add-type>
          </el-form-item>
          <el-form-item label="材料名称:">
            <add-type v-model.trim="materialTypeName" :modellist="materialList" @delType="delModel($event, '材料')">
            </add-type>
            <el-button size="mini" class="exportBtn xz" @click="addClick('添加材料名称')"> 新增 </el-button>
          </el-form-item>
        </el-form>
        <dialog-footer-button @close="close('材料名称')" @saveName="saveName('材料名称')"></dialog-footer-button>
      </el-dialog>

      <el-form ref="form" class="infoForm" label-width="80px">
        <el-form-item label="一级品类:">
          <el-select
            ref="oneSelect"
            v-model.trim="oneModelValue"
            placeholder="请添加一级品类"
            size="mini"
            @change="oneSelectChange"
          >
            <el-option v-for="item in oneType" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
          </el-select>
          <el-button size="mini" class="exportBtn xz" style="margin-left: 10px" @click="addClick('一级品类')"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item label="二级品类:">
          <el-select
            ref="twoSelect"
            @change="twoSelectChange"
            v-model.trim="twoModelValue"
            placeholder="请添加二级品类"
            size="mini"
          >
            <el-option v-for="item in twoType" :key="item.id" :label="item.typeName" :value="item.id"> </el-option>
          </el-select>
          <el-button size="mini" class="exportBtn xz" style="margin-left: 10px" @click="addClick('二级品类')"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item label="材料名称:">
          <el-select @change="materialChange" v-model.trim="materialValue" placeholder="请添加材料名称" size="mini">
            <el-option v-for="item in materialType" :key="item.id" :label="item.materialName" :value="item.id">
            </el-option>
          </el-select>
          <el-button size="mini" class="exportBtn xz" style="margin-left: 10px" @click="addClick('材料名称')"
            >新增</el-button
          >
        </el-form-item>
        <el-form-item label="规格型号:">
          <div class="model-type" v-for="(el, index) in modeltype" :key="index">
            <el-input v-model.trim="el.input" clearable placeholder="请输入规格型号" size="mini"></el-input>
            <el-select
              class="select"
              v-model.trim="el.value"
              placeholder="请选择单位"
              size="mini"
              style="margin-left: 10px; width: 150px"
            >
              <el-option v-for="(item, index) in el.options" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
            <i v-if="modeltype.length > 1" class="iconfont icon-jianshanchu-yuankuang" @click="delModelType(index)"></i>
          </div>
          <el-button size="mini" class="exportBtn xz" @click="addClick('规格型号')">新增</el-button>
        </el-form-item>
      </el-form>
      <dialog-footer-button @close="close('规格型号')" @saveName="saveName('规格型号')"></dialog-footer-button>
    </el-dialog>
  </div>
</template>

<script>
import addType from './components/addType.vue'
import dialogFooterButton from '../../../components/dialogFooterButton.vue'
import modelTables from './modelManage/modelTables.vue'
import oneTypeTables from './oneTypeManage/oneTypeTables.vue'
import twoTypeTables from './twoTypeManage/twoTypeTables.vue'
import materialTables from './materialTables.vue'
export default {
  components: {
    addType,
    dialogFooterButton,
    modelTables,
    oneTypeTables,
    twoTypeTables,
    materialTables
  },
  data() {
    return {
      materialValue: null,
      twoModelValue: null,
      oneModelValue: null,
      oneModelName: '',
      oneTypeName: [],
      twoModelName: '',
      twoTypeName: [],
      materialTypeName: [],
      materialModelName: '',
      materialList: [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入材料名称'
        }
      ],
      oneModelList: [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入一级品类名称'
        }
      ],
      twoModelList: [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入二级品类名称'
        }
      ],
      option: [
        {
          value: '单位选择',
          label: '单位选择'
        },
        {
          label: '件',
          value: '件'
        },
        {
          label: '个',
          value: '个'
        },
        {
          label: '张',
          value: '张'
        },
        {
          label: '卷',
          value: '卷'
        },
        {
          label: '把',
          value: '把'
        },
        {
          label: '千克',
          value: '千克'
        },
        {
          label: '吨',
          value: '吨'
        },
        {
          label: '米',
          value: '米'
        },
        {
          label: '㎡',
          value: '㎡'
        },
        {
          label: 'm³',
          value: 'm³'
        },
        {
          label: '根',
          value: '根'
        },
        {
          label: '捆',
          value: '捆'
        },
        {
          label: '套',
          value: '套'
        },
        {
          label: '盒',
          value: '盒'
        },
        {
          label: '箱',
          value: '箱'
        },
        {
          label: '桶',
          value: '桶'
        },
        {
          label: '台',
          value: '台'
        },
        {
          label: '包',
          value: '包'
        },
        {
          label: '份',
          value: '份'
        },
        {
          label: '片',
          value: '片'
        }
      ],
      modeltype: [
        {
          input: '',
          value: '单位选择',
          options: [
            {
              value: '单位选择',
              label: '单位选择'
            },
            {
              label: '件',
              value: '件'
            },
            {
              label: '个',
              value: '个'
            },
            {
              label: '张',
              value: '张'
            },
            {
              label: '卷',
              value: '卷'
            },
            {
              label: '把',
              value: '把'
            },
            {
              label: '千克',
              value: '千克'
            },
            {
              label: '吨',
              value: '吨'
            },
            {
              label: '米',
              value: '米'
            },
            {
              label: '㎡',
              value: '㎡'
            },
            {
              label: 'm³',
              value: 'm³'
            },
            {
              label: '根',
              value: '根'
            },
            {
              label: '捆',
              value: '捆'
            },
            {
              label: '套',
              value: '套'
            },
            {
              label: '盒',
              value: '盒'
            },
            {
              label: '箱',
              value: '箱'
            },
            {
              label: '桶',
              value: '桶'
            },
            {
              label: '台',
              value: '台'
            },
            {
              label: '包',
              value: '包'
            },
            {
              label: '份',
              value: '份'
            },
            {
              label: '片',
              value: '片'
            }
          ]
        }
      ],
      materialType: [],
      materalVisible: false,
      twoType: [],
      // 所有的二级品类
      twoList: [],
      twoTypeVisible: false,
      oneType: [],
      oneTypeVisible: false,
      modelVisible: false,
      curType: '1',
      partTypeList: [
        {
          value: '1',
          name: '规格型号管理'
        },
        {
          value: '2',
          name: '一级品类管理'
        },
        {
          value: '3',
          name: '二级品类管理'
        },
        {
          value: '4',
          name: '材料名称管理'
        }
      ]
    }
  },
  mounted() {},
  methods: {
    // 删除规格型号子项
    delModelType(index) {
      this.modeltype.splice(index, 1)
    },
    delModel(index, val) {
      if (val === '一级') {
        this.oneModelList.splice(index, 1)
      } else if (val === '二级') {
        this.twoModelList.splice(index, 1)
      } else if (val === '材料') {
        this.materialList.splice(index, 1)
      }
    },
    saveName(val) {
      if (val === '一级品类名称') {
        let typeName = []
        this.oneTypeName.forEach(item => {
          if (item.input) {
            typeName.push({ typeName: item.input })
          }
        })
        if (typeName.length > 0) {
          this.$https({
            method: 'post',
            url: '/material/addTypeOne',
            data: typeName
          })
            .then(res => {
              if (res.code === 0) {
                this.close('一级品类名称')
                this.$message.success('添加成功')
                this.$refs.modeltable.getData()
                this.getTypeSelectList()
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        } else {
          this.$message.error('请输入一级品类名称')
        }
      } else if (val === '二级品类名称') {
        let typeName = []
        let fatherId = null
        if (this.twoTypeName && this.twoTypeName.length === 0) {
          this.$message.error('请输入二级品类名称')
        } else if (this.twoTypeName && this.twoTypeName.length === 1) {
          this.twoTypeName.forEach(item => {
            if (item.input) {
              fatherId = item.oneTypeId
              typeName.push({ typeName: item.input, fatherId: item.oneTypeId })
              this.saveTwoName(typeName, fatherId)
            } else {
              this.$message.error('请输入二级品类名称')
            }
          })
        } else if (this.twoTypeName && this.twoTypeName.length > 1) {
          this.$confirm('未填写的二级品类名称不会保存，是否确认提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.twoTypeName.forEach(item => {
                if (item.input) {
                  fatherId = item.oneTypeId
                  typeName.push({
                    typeName: item.input,
                    fatherId: item.oneTypeId
                  })
                }
              })
              this.saveTwoName(typeName, fatherId)
            })
            .catch(() => {
              this.$message('取消保存')
            })
        }
      } else if (val === '材料名称') {
        let typeName = []
        if (this.materialTypeName && this.materialTypeName.length === 0) {
          this.$message.error('请输入材料名称')
        } else if (this.materialTypeName && this.materialTypeName.length === 1) {
          this.materialTypeName.forEach(item => {
            if (item.input) {
              typeName.push({
                materialName: item.input,
                typeOneId: item.oneTypeId,
                typeTwoId: item.twoTypeId
              })
              this.saveMaterialName(typeName)
            } else {
              this.$message.error('请输入材料名称')
            }
          })
        } else if (this.materialTypeName && this.materialTypeName.length > 1) {
          this.$confirm('未填写的材料名称不会保存，是否确认提交', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.materialTypeName.forEach(item => {
                if (item.input) {
                  typeName.push({
                    materialName: item.input,
                    typeOneId: item.oneTypeId,
                    typeTwoId: item.twoTypeId
                  })
                }
              })
              this.saveMaterialName(typeName)
            })
            .catch(() => {
              this.$message('取消保存')
            })
        }
      } else if (val === '规格型号') {
        let typeName = []
        if (this.oneModelName) {
          if (this.twoModelName) {
            if (this.materialModelName) {
              if (this.modeltype && this.modeltype.length > 1) {
                this.$confirm('未填写的规格型号不会保存，是否确认提交', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                })
                  .then(() => {
                    this.modeltype.forEach(item => {
                      if (item.input) {
                        if (item.value === '单位选择') {
                          this.$message.error('请选择单位')
                          typeName.push({
                            materialId: this.materialValue,
                            materialName: this.materialModelName,
                            materialUnit: item.value,
                            specsName: item.input,
                            typeOneId: this.oneModelValue,
                            typeOneName: this.oneModelName,
                            typeTwoId: this.twoModelValue,
                            typeTwoName: this.twoModelName
                          })
                        } else {
                          typeName.push({
                            materialId: this.materialValue,
                            materialName: this.materialModelName,
                            materialUnit: item.value,
                            specsName: item.input,
                            typeOneId: this.oneModelValue,
                            typeOneName: this.oneModelName,
                            typeTwoId: this.twoModelValue,
                            typeTwoName: this.twoModelName
                          })
                        }
                      }
                    })
                    if (!typeName.length) {
                      this.$message.error('请输入规格型号,并选择单位')
                      return false
                    }
                    let flag = typeName.every(item => {
                      return item.specsName && item.materialUnit !== '单位选择'
                    })
                    if (flag && typeName.length > 0) {
                      this.saveModelName(typeName)
                    }
                  })
                  .catch(() => {
                    this.$message('取消保存')
                  })
              } else if (this.modeltype && this.modeltype.length === 1) {
                this.modeltype.forEach(item => {
                  if (item.input) {
                    if (item.value === '单位选择') {
                      this.$message.error('请选择单位')
                    } else {
                      typeName.push({
                        materialId: this.materialValue,
                        materialName: this.materialModelName,
                        materialUnit: item.value,
                        specsName: item.input,
                        typeOneId: this.oneModelValue,
                        typeOneName: this.oneModelName,
                        typeTwoId: this.twoModelValue,
                        typeTwoName: this.twoModelName
                      })
                      this.saveModelName(typeName)
                    }
                  } else {
                    this.$message.error('请输入规格型号')
                  }
                })
              }
            } else {
              this.$message.error('请选择材料名称')
            }
          } else {
            this.$message.error('请选择二级品类')
          }
        } else {
          this.$message.error('请选择一级品类')
        }
      }
    },
    // 添加二级品类名称
    saveTwoName(typeName, fatherId) {
      this.$https({
        method: 'post',
        url: '/material/addTypeTwo',
        data: typeName
      })
        .then(res => {
          if (res.code === 0) {
            this.close('二级品类名称')
            this.$message.success('添加成功')
            this.$refs.modeltable.getData()
            this.getTypeSelectList(fatherId)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 添加规格型号
    saveModelName(data) {
      this.$https({
        method: 'post',
        url: '/material/addMaterialSpecs',
        data: data
      })
        .then(res => {
          if (res.code === 0) {
            this.$message.success('添加成功')
            this.close('规格型号')
            this.$refs.modeltable.getData()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 添加材料名称
    saveMaterialName(data) {
      this.$https({
        method: 'post',
        url: '/material/addMaterial',
        data: data
      })
        .then(res => {
          // console.log(res);
          if (res.code === 0) {
            this.close('材料名称')
            this.$message.success('添加成功')
            this.$refs.modeltable.getData()
            this.getModelSelect()
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 按钮点击
    addClick(val) {
      if (val === '一级品类') {
        this.$set(this.oneModelList[0], 'input', '')
        this.$set(this.oneModelList[0], 'isdisabled', false)
        this.$set(this.oneModelList[0], 'toptip', '请输入一级品类名称')
        this.oneTypeVisible = true
      } else if (val === '添加一级品类') {
        this.oneModelList.push({
          input: '',
          isdisabled: false,
          toptip: '请输入一级品类名称'
        })
      } else if (val === '二级品类') {
        if (this.oneModelValue) {
          this.$set(this.oneModelList[0], 'input', this.oneModelName)
          this.$set(this.oneModelList[0], 'isdisabled', true)
          this.$set(this.oneModelList[0], 'toptip', '')
          this.$set(this.oneModelList[0], 'oneTypeId', this.oneModelValue)
          this.$set(this.twoModelList[0], 'input', '')
          this.$set(this.twoModelList[0], 'isdisabled', false)
          this.$set(this.twoModelList[0], 'toptip', '请输入二级品类名称')
          // this.$set(this.twoModelList[0], "oneTypeName", this.oneModelName);
          this.$set(this.twoModelList[0], 'oneTypeId', this.oneModelValue)
          this.$set(this.twoModelList[0], 'twoTypeId', null)
          this.twoTypeVisible = true
        } else {
          this.$message.error('请选择一级品类')
        }
      } else if (val === '添加二级品类') {
        this.twoModelList.push({
          input: '',
          isdisabled: false,
          toptip: '请输入二级品类名称',
          // oneTypeName:this.oneModelName,
          oneTypeId: this.oneModelValue,
          twoTypeId: null
        })
      } else if (val === '材料名称') {
        if (this.oneModelValue && this.twoModelValue) {
          this.$set(this.oneModelList[0], 'input', this.oneModelName)
          this.$set(this.oneModelList[0], 'isdisabled', true)
          this.$set(this.oneModelList[0], 'toptip', '')
          this.$set(this.twoModelList[0], 'input', this.twoModelName)
          this.$set(this.twoModelList[0], 'isdisabled', true)
          this.$set(this.twoModelList[0], 'toptip', '')
          this.$set(this.twoModelList[0], 'oneTypeId', this.oneModelValue)
          this.$set(this.materialList[0], 'input', '')
          this.$set(this.materialList[0], 'isdisabled', false)
          this.$set(this.materialList[0], 'toptip', '请输入材料名称')
          this.$set(this.materialList[0], 'oneTypeId', this.oneModelValue)
          this.$set(this.materialList[0], 'twoTypeId', this.twoModelValue)
          this.materalVisible = true
        } else {
          this.$message.error('请选择一级以及二级品类')
        }
      } else if (val === '添加材料名称') {
        this.materialList.push({
          input: '',
          isdisabled: false,
          toptip: '请输入材料名称',
          oneTypeId: this.oneModelValue,
          twoTypeId: this.twoModelValue
        })
      } else if (val === '规格型号') {
        this.modeltype.push({
          input: '',
          value: '单位选择',
          options: [
            {
              value: '单位选择',
              label: '单位选择'
            },
            {
              label: '件',
              value: '件'
            },
            {
              label: '个',
              value: '个'
            },
            {
              label: '张',
              value: '张'
            },
            {
              label: '卷',
              value: '卷'
            },
            {
              label: '把',
              value: '把'
            },
            {
              label: '千克',
              value: '千克'
            },
            {
              label: '吨',
              value: '吨'
            },
            {
              label: '米',
              value: '米'
            },
            {
              label: '㎡',
              value: '㎡'
            },
            {
              label: 'm³',
              value: 'm³'
            },
            {
              label: '根',
              value: '根'
            },
            {
              label: '捆',
              value: '捆'
            },
            {
              label: '套',
              value: '套'
            },
            {
              label: '盒',
              value: '盒'
            },
            {
              label: '箱',
              value: '箱'
            },
            {
              label: '桶',
              value: '桶'
            },
            {
              label: '台',
              value: '台'
            },
            {
              label: '包',
              value: '包'
            },
            {
              label: '份',
              value: '份'
            },
            {
              label: '片',
              value: '片'
            }
          ]
        })
      }
    },
    // 对话框关闭回调
    closeDialog(done) {
      this.modeltype = [
        {
          input: '',
          value: '单位选择',
          options: [
            {
              value: '单位选择',
              label: '单位选择'
            },
            {
              label: '件',
              value: '件'
            },
            {
              label: '个',
              value: '个'
            },
            {
              label: '张',
              value: '张'
            },
            {
              label: '卷',
              value: '卷'
            },
            {
              label: '把',
              value: '把'
            },
            {
              label: '千克',
              value: '千克'
            },
            {
              label: '吨',
              value: '吨'
            },
            {
              label: '米',
              value: '米'
            },
            {
              label: '㎡',
              value: '㎡'
            },
            {
              label: 'm³',
              value: 'm³'
            },
            {
              label: '根',
              value: '根'
            },
            {
              label: '捆',
              value: '捆'
            },
            {
              label: '套',
              value: '套'
            },
            {
              label: '盒',
              value: '盒'
            },
            {
              label: '箱',
              value: '箱'
            },
            {
              label: '桶',
              value: '桶'
            },
            {
              label: '台',
              value: '台'
            },
            {
              label: '包',
              value: '包'
            },
            {
              label: '份',
              value: '份'
            },
            {
              label: '片',
              value: '片'
            }
          ]
        }
      ]
      this.materialList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入材料名称'
        }
      ]
      this.oneModelList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入一级品类名称'
        }
      ]
      this.twoModelList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入二级品类名称'
        }
      ]
      this.oneModelValue = null
      this.twoModelValue = null
      this.materialValue = null
      done()
    },
    oneCloseDialog(done) {
      this.oneModelList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入一级品类名称'
        }
      ]
      // this.oneModelValue = null;
      // this.twoModelValue = null;
      // this.materialValue = null;
      done()
    },
    twoCloseDialog(done) {
      this.twoModelList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入二级品类名称'
        }
      ]
      done()
    },
    materialCloseDialog(done) {
      this.materialList = [
        {
          input: '',
          isdisabled: false,
          toptip: '请输入材料名称'
        }
      ]
      done()
    },
    close(val) {
      if (val === '规格型号') {
        this.modeltype = [
          {
            input: '',
            value: '单位选择',
            options: [
              {
                value: '单位选择',
                label: '单位选择'
              },
              {
                label: '件',
                value: '件'
              },
              {
                label: '个',
                value: '个'
              },
              {
                label: '张',
                value: '张'
              },
              {
                label: '卷',
                value: '卷'
              },
              {
                label: '把',
                value: '把'
              },
              {
                label: '千克',
                value: '千克'
              },
              {
                label: '吨',
                value: '吨'
              },
              {
                label: '米',
                value: '米'
              },
              {
                label: '㎡',
                value: '㎡'
              },
              {
                label: 'm³',
                value: 'm³'
              },
              {
                label: '根',
                value: '根'
              },
              {
                label: '捆',
                value: '捆'
              },
              {
                label: '套',
                value: '套'
              },
              {
                label: '盒',
                value: '盒'
              },
              {
                label: '箱',
                value: '箱'
              },
              {
                label: '桶',
                value: '桶'
              },
              {
                label: '台',
                value: '台'
              },
              {
                label: '包',
                value: '包'
              },
              {
                label: '份',
                value: '份'
              },
              {
                label: '片',
                value: '片'
              }
            ]
          }
        ]
        this.materialList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入材料名称'
          }
        ]
        this.oneModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入一级品类名称'
          }
        ]
        this.twoModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入二级品类名称'
          }
        ]
        this.oneModelValue = null
        this.twoModelValue = null
        this.materialValue = null
        this.modelVisible = false
      } else if (val === '一级品类名称') {
        this.oneTypeVisible = false
        this.materialList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入材料名称'
          }
        ]
        this.oneModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入一级品类名称'
          }
        ]
        this.twoModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入二级品类名称'
          }
        ]
      } else if (val === '二级品类名称') {
        this.twoTypeVisible = false
        this.materialList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入材料名称'
          }
        ]
        this.oneModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入一级品类名称'
          }
        ]
        this.twoModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入二级品类名称'
          }
        ]
      } else if (val === '材料名称') {
        this.materalVisible = false
        this.materialList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入材料名称'
          }
        ]
        this.oneModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入一级品类名称'
          }
        ]
        this.twoModelList = [
          {
            input: '',
            isdisabled: false,
            toptip: '请输入二级品类名称'
          }
        ]
      }
    },
    // tab切换
    partTypeChange(e) {
      if (e.name === '1') {
        // this.$router.push("/personal/material/model");
      }
    },
    // 一级品类选择改变
    oneSelectChange(val) {
      this.oneModelValue = val
      this.oneType.forEach(item => {
        if (item.id === val) {
          this.oneModelName = item.typeName
        }
      })
      this.initTwoSelect(val)
    },
    // 改变一级品类以及新增二级品类时重新渲染二级品类select
    initTwoSelect(val) {
      // 清除二级品类选择默认值
      this.twoModelValue = null
      this.materialValue = null
      this.materialType = []
      this.twoType = this.twoList.filter(item => {
        return item.fatherId === val
      })
    },
    // 材料选择器改变
    materialChange(val) {
      this.materialValue = val
      this.materialType.forEach(item => {
        if (item.id === val) {
          this.materialModelName = item.materialName
        }
      })
    },
    // 改变二级品类选择以及新增材料名称时
    getModelSelect() {
      this.materialValue = null
      if (this.twoModelValue && this.oneModelValue) {
        this.$https({
          method: 'post',
          url: '/material/listMaterialByOneAndTwoType',
          data: {
            oneId: this.oneModelValue,
            twoId: this.twoModelValue
          }
        })
          .then(res => {
            if (res.code === 0) {
              this.materialType = res.data
            } else {
              this.$message.error(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    twoSelectChange(val) {
      this.twoModelValue = val
      this.twoType.forEach(item => {
        if (item.id === val) {
          this.twoModelName = item.typeName
        }
      })
      this.getModelSelect()
    },
    // 添加材料按钮点击
    addMaterial() {
      this.modelVisible = true
      this.getTypeSelectList()
    },
    getTypeSelectList(fatherId) {
      this.twoList = []
      this.$https({
        method: 'post',
        url: '/material/listAllMaterialType',
        data: {}
      })
        .then(res => {
          if (res.code == 0) {
            let arr = [...res.data]
            this.oneType = arr.filter(item => {
              if (item.fatherId === 0 && item.state) {
                return item
              }
            })
            arr.forEach(element => {
              if (element.fatherId && element.state) {
                this.twoList.push(element)
              }
            })
            if (fatherId) {
              this.initTwoSelect(fatherId)
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="less" scoped>
#material {
  height: 100%;
  .tab-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid #ebebeb;
  }
  .list-container {
    height: calc(100% - 116px);
    padding: 16px 16px 40px 16px;
  }
  .model-type {
    display: flex;
    // justify-content: center;
    align-items: center;
  }
  .exportBtn {
    width: 130px;
  }
  .xg,
  .qd {
    color: #fff !important;
    background-color: #fa7355;
    border: 1px solid #fa7355 !important;
    padding: 9px 8px !important;
    &:hover {
      color: #fa7355 !important;
      background-color: transparent !important;
    }
  }
  .xz {
    width: 60px;
  }
  .add {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 114px;
  }
}
.xz {
  width: 60px;
}
</style>
<style lang="less">
@inputWidth: 280px;
@selectWidth: 150px;
#material {
  .el-tabs__nav-wrap::after {
    height: 0;
  }
  .el-tabs__item {
    height: 60px;
    line-height: 60px;
  }
  .el-tabs__header {
    margin: 0;
  }
  .model-dialog {
    .el-input {
      width: auto;
    }
    .el-input__inner {
      width: @inputWidth;
    }
    .select {
      .el-input__inner {
        width: @selectWidth;
      }
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    .icon-jianshanchu-yuankuang {
      font-size: 24px;
      color: #f86951;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
